<script>
export default {
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    items: {
      type: Array,
      required: true
    }
  },
  watch: {
    items () {
      this.init()
    },
    value () {
      this.setValue()
    },
    checkedIds () {
      this.$emit('change', this.checkedIds)
    }
  },
  data () {
    return {
      /* 控制展开/关闭 */
      expandKey: [],
      /* 控制节点显示隐藏 */
      showObj: {},
      /* 记录每级父ids */
      pids: {},
      /* 记录选中项id */
      checkedIds: []
    }
  },
  model: {
    props: 'value',
    event: 'change'
  },
  created () {
    this.init()
    this.setValue()
  },
  methods: {
    init () {
      const showObj = {}
      const expandKey = []
      const pids = {}
      const s = (array, pid) => {
        array.forEach(item => {
          showObj[item.id] = true
          if (pid !== undefined) {
            pids[item.id] = pid.split(',')
          }
          expandKey.push(item.id)
          if (item.children && item.children.length > 0) {
            s(item.children, pid === undefined ? item.id : pid + ',' + item.id)
          }
        })
      }
      s(this.items)
      this.expandKey = expandKey
      this.showObj = showObj
      this.pids = pids
    },
    setValue () {
      if (this.value && this.value.length > 0) {
        this.checkedIds = this.value
      }
    }
  },
  render: function (h, ctx) {
    const _this = this
    function getCard (items, aCard) {
      items.forEach(element => {
        const bCard = []
        if (element.children && element.children.length > 0) {
          getCard(element.children, bCard)
          aCard.push(
            h(
              'div',
              {
                directives: [
                  {
                    name: 'show',
                    value: _this.showObj[element.id]
                  }
                ],
                props: {
                  size: 'small'
                },
                style: {
                  margin: '10px 20px'
                }
              },
              [
                h('a-icon', {
                  props: {
                    type: _this.expandKey.indexOf(element.id) > -1 ? 'caret-down' : 'caret-right'
                  },
                  on: {
                    click: e => {
                      let _b = true
                      if (_this.expandKey.indexOf(element.id) > -1) {
                        _this.expandKey = _this.expandKey.filter(v => v !== element.id)
                      } else {
                        _b = false
                        _this.expandKey.push(element.id)
                      }

                      const s = array => {
                        array.forEach(item => {
                          _this.showObj[item.id] = !_b
                          // if (item.children && item.children.length > 0) {
                          //   s(item.children)
                          // }
                        })
                      }
                      s(element.children)
                    }
                  },
                  style: {
                    marginRight: '10px',
                    cursor: 'pointer'
                  }
                }),
                h(
                  'a-checkbox',
                  {
                    props: { value: element, checked: _this.checkedIds.indexOf(element.id) > -1 },
                    on: {
                      change: e => {
                        const checked = e.target.checked
                        if (checked) {
                          _this.checkedIds.push(element.id)
                          const s = array => {
                            array.forEach(item => {
                              if (_this.checkedIds.indexOf(item.id) < 0) {
                                _this.checkedIds.push(item.id)
                              }
                              if (item.children && item.children.length > 0) {
                                s(item.children)
                              }
                            })
                          }
                          /* 选中下级 */
                          s(element.children)
                        } else {
                          _this.checkedIds = _this.checkedIds.filter(v => v !== element.id)
                          const s = array => {
                            array.forEach(item => {
                              if (_this.checkedIds.indexOf(item.id) > -1) {
                                _this.checkedIds = _this.checkedIds.filter(v => v !== item.id)
                              }
                              if (item.children && item.children.length > 0) {
                                s(item.children)
                              }
                            })
                          }
                          /* 选中下级 */
                          s(element.children)
                        }
                        if (checked) {
                          /* 选中上级 */
                          const array = _this.pids[element.id]
                          if (array !== undefined) {
                            array.forEach(item => {
                              if (_this.checkedIds.indexOf(item) < 0) {
                                _this.checkedIds.push(item)
                              }
                            })
                          }
                        }
                      }
                    }
                  },
                  element.title
                ),
                h(
                  'div',
                  {
                    props: {
                      size: 'small'
                    },
                    style: {
                      margin: '10px 0px',
                      paddingLeft: '24px'
                    }
                  },
                  [...bCard]
                )
              ]
            )
          )
        } else {
          aCard.push(
            h(
              'a-checkbox',
              {
                props: { value: element, checked: _this.checkedIds.indexOf(element.id) > -1 },
                directives: [
                  {
                    name: 'show',
                    value: _this.showObj[element.id]
                  }
                ],
                on: {
                  change: e => {
                    const checked = e.target.checked

                    if (checked) {
                      _this.checkedIds.push(element.id)

                      /* 选中上级 */
                      const array = _this.pids[element.id]
                      if (array !== undefined) {
                        array.forEach(item => {
                          if (_this.checkedIds.indexOf(item) < 0) {
                            _this.checkedIds.push(item)
                          }
                        })
                      }
                    } else {
                      _this.checkedIds = _this.checkedIds.filter(v => v !== element.id)
                    }
                  }
                }
              },
              element.title
            )
          )
        }
      })
    }

    const aCard = []
    getCard(this.items, aCard)
    return h('div', { style: { margin: '0 auto' } }, aCard)
  }
}
</script>
